<template>
    <view class="order">
        <view class="header">
            <view class="header-1">
                <view class="header-1-text-1">
                    标准积分账户
                </view>
                <view 
                    class="header-1-text-2"
                    @click="popup1.open()"
                >
                    <view>积分规则</view>
                    <view class="iconfont icon-wenhao"></view>
                </view>
            </view>
            <view class="header-2">
                {{ integral }}
            </view>
        </view>
        <view class="all-time">
            <uni-datetime-picker
                v-model="selectDate"
                type="date"
                @change="dateChange"
            >
                {{ selectDate ? selectDate : '全部时间' }}
            </uni-datetime-picker>
            <view class="all-time-sanjiao"></view>
            <view
                v-if="selectDate"
                class="all-time-text"
                @click="selectDate = '';dateChange(selectDate)"
            >
                重置
            </view>
        </view>
        <view class="my-list">
            <uni-list :border="true">
                <uni-list-item
                    v-for="(item, index) in checkList"
                    :key="index"
                    title=""
                    rightText=""
                    note=""
                    thumb=""
                    thumbSize="lg"
                >
                    <template v-slot:header>
                    </template>
                    <template v-slot:body>
                        <view class="slot-box slot-text">
                            <view class="slot-box-row-1">
                                <view class="slot-box-row-1-left">
                                    <image
                                        src="@/static/logo.png" 
                                        :draggable="false"
                                        mode="scaleToFill"
                                        class="slot-img-1"
                                    ></image>
                                    <view class="slot-box-row-1-left-text">积分变化</view>
                                </view>
                                <view class="slot-box-row-1-right">
                                    {{ item.zspr_create_time?.split(' ')[0] }}
                                </view>
                            </view>
                            <view class="slot-box-row-2">
                                <!-- <image
                                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                                    :draggable="false"
                                    mode="scaleToFill"
                                    class="slot-box-row-2-img"
                                ></image> -->
                                <view class="slot-box-row-2-text">
                                    <view class="slot-box-row-2-text-1">{{ item.zspr_ex1 }}</view>
                                    <!-- <view class="slot-box-row-2-text-2">{{ item.zsoi_ex6 }}</view> -->
                                    <!-- <view class="slot-box-row-2-text-3">
                                        <view class="slot-box-row-2-text-3-left">
                                            {{ Number(item.zsoi_ex2).toFixed(2) }}积分
                                        </view>
                                        <view class="slot-box-row-2-text-3-right">
                                            x{{ item.zsoi_ex3 }}
                                        </view>
                                    </view> -->
                                </view>
                            </view>
                            <view class="slot-box-row-3">
                                <!-- <view class="slot-box-row-3-left">
                                    实付：
                                </view> -->
                                <view class="slot-box-row-3-right">
                                    {{item.zspr_ex3 == '增加' ? '+' : '-'}}{{ Number(item.zspr_ex2).toFixed(2) }}积分
                                </view>
                            </view>  
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
            <uni-load-more :status="status"></uni-load-more>
        </view>
        <uni-popup
            ref="popup1" 
            type="center"
            :is-mask-click="true"
        >
                <view class="my-popup-box">
                    <view class="my-popup-box-img">
                        <view class="my-popup-box-img-text">积分规则</view>
                    </view>
                    <view class="my-popup-box-content">
                        <view class="my-popup-box-content-text-1">1、每天签到可赚取1积分，连续签到7天则额外获得4积分奖励。若中断签到，则需重新开始累计天数。</view>
                        <view class="my-popup-box-content-text-1">2、被邀用户完成转运订单后，邀请用户可获得消费金额（除氧气，高速通行费外）10%的积分</view>
                        <view class="my-popup-box-content-text-1">所有积分均可在小程序内的积分商城用于兑换商品，以及在许愿池中兑换奖品。</view>
                        <view  style="border-bottom: 1rpx solid #d8c7c7; margin-bottom: 10rpx"></view>
                    </view>
                    <!-- <view style="display: flex; padding-top: 20rpx; box-sizing: border-box;">
                        <button
                            size="mini"
                            type="warn"
                            style=""
                            @click="popup1.close()"
                        >
                            取消
                        </button>
                        <button
                            size="mini"
                            style="background: #2979ff; color: #fff; "
                            @click="popup1.close();"
                        >
                            确认
                        </button>
                    </view> -->
                </view>
         </uni-popup>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { pointsRecordListApi } from '@/apis'
    const popup1: Ref<any> = ref(null)
    const formData:Ref<any> = ref({
        
    })
    const selectDate: Ref<any> = ref('')
    const checkList:Ref<any> = ref([
        // {
        //     zso_ex4: '已取消', //状态
        //     zso_ex1: '12瓶装易捷水', //标题
        //     zsoi_ex4: 120, //积分
        //     zsoi_ex3: 1, //数量
        //     zso_ex5: '地址', //地址
        //     zso_no: '73695326398670', //订单编号
        //     zsoi_ex5: 'http://oss3.smartyoke.com/putaway/23e338cee2cb4428b7a29f45e4ff0268.jpg', //图片
        // }
    ])
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    const pageNo: Ref<number> = ref(1)
    const pageSize: Ref<number> = ref(10)
    const integral: Ref<number> = ref(0)
    onShow((val) => {
        // wxUserInfoApi({}).then(res => {
        //     if (res.code == 200) {
        //         integral.value = res.data.zwu_jifen
        //     } else {
                
        //     }
        // })
    })
    onLoad((val) => {
        dateChange(selectDate.value)
    })

    // 下拉刷新重新加载数据
    onPullDownRefresh(() => {
       status.value = 'loading'
       pageNo.value = 1
       pointsRecordListApi({
           pageNo: pageNo.value, //第几页,默认从1开始
           pageSize: pageSize.value, //每页几条
           startTime: selectDate.value,
       }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
            // status.value = 'no-more'
            if (res.data.length == pageSize.value) {
                status.value = 'more'
            } else {
                status.value = 'no-more'
            }
       }).catch((e) => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
            uni.stopPullDownRefresh();
        })
    })


    // 上拉加载数据
    onReachBottom(() => {
       if (status.value = 'more') {
           status.value = 'loading'
           pageNo.value++
           pointsRecordListApi({
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
                startTime: selectDate.value,
           }).then((res: any) => {
               console.log(res.data)
               // res.data.unshift(...checkList.value)
               // checkList.value = res.data
               checkList.value.push(...res.data)
               if (res.data.length == pageSize.value) {
                   status.value = 'more'
               } else {
                   status.value = 'no-more'
               }
           }).catch((e) => {
                status.value = 'no-more'
            }).finally(() => {
                // status.value = 'no-more'
            })
       }
    })
    const dateChange = ((val: any) => {
        status.value = 'loading'
        pageNo.value = 1
        pointsRecordListApi({
            pageNo: pageNo.value, //第几页,默认从1开始
            pageSize: pageSize.value, //每页几条
            startTime: selectDate.value,
        }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
           // checkList.value.push(...res.data)
           // status.value = 'no-more'
           if (res.data.length == pageSize.value) {
               status.value = 'more'
           } else {
               status.value = 'no-more'
           }
        }).catch((e) => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
        })
    })
 
</script>

<style lang="scss" scoped>
    .order {
        height: 100vh;
        overflow: hidden;
        background-color: #f2f2f2;
        display: flex;
        flex-direction: column;
    }
    .header {
        box-sizing: border-box;
        padding: 20rpx;
        background-image: linear-gradient(to bottom, #c9e3f9, #fff);
        margin: 10rpx;
        border-radius: 20rpx;
        .header-1 {
            display: flex;
            justify-content: space-between;
            .header-1-text-1 {
                font-size: 28rpx;
            }
            .header-1-text-2 {
                font-size: 24rpx;
                display: flex;
            }
        }
        .header-2 {
            font-size: 50rpx;
            font-weight: bold;
            padding: 20rpx 0;
        }
    }
    .all-time {
        padding: 10rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        :deep(.uni-date) {
            width: auto;
            flex: initial;
        }
        .all-time-sanjiao {
            content: '';
            width: 0px;
            height: 0px;
            box-sizing: border-box;
            border: 13rpx solid transparent;
            border-top-color: #6b7279;
            margin-top: 10rpx;
            margin-left: 5rpx;
        }
        .all-time-text {
            padding-left: 20rpx;
            color: #6b7279;
        }
    }
    /* list样式修改 */
    .slot-box {
        // margin-top: 10rpx;
        flex: 1;
    	display: flex;
    	flex-direction: column;
        background: rgb(255, 255, 255);
        border-radius: 40rpx;
        box-sizing: border-box;
        padding: 20rpx;
        .slot-box-row-1 {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            border-bottom: 1rpx solid #fff5f5;
            box-sizing: border-box;
            padding: 12rpx 0;
            .slot-box-row-1-left {
                flex: 1;
                display: flex;
                align-items: center;
                .slot-img-1 {
                    width: 40rpx;
                    height: 40rpx;
                }
                .slot-box-row-1-left-text {
                    // color: #999;
                    box-sizing: border-box;
                    padding-left: 10rpx;
                    flex: 1;
                }
            }
            .slot-box-row-1-right {
                color: #999;
                // width: 110rpx;
                text-align: right;
            }
        }
        
        .slot-box-row-2 {
            background: #fff;
            display: flex;
            padding: 10rpx 0;
            box-sizing: border-box;
            // border-bottom: 1rpx solid #fff5f5;
            .slot-box-row-2-img {
                width: 200rpx;
                height: 200rpx
            }
            .slot-box-row-2-text {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                box-sizing: border-box;
                padding-left: 10rpx;
                .slot-box-row-2-text-1 {
                    
                }
                .slot-box-row-2-text-2 {
                    // width: 300rpx;
                    box-sizing: border-box;
                    text-align: center;
                    padding: 5rpx;
                    background: #dae4f2;
                    font-size: 20rpx;
                    align-self: flex-start;
                    // background: rgb(218, 228, 242);
                }
                .slot-box-row-2-text-3 {
                    display: flex;
                    align-self: flex-end;
                    .slot-box-row-2-text-3-left {
                        // color: #f2403c;
                        // font-weight: bold;
                    }
                    .slot-box-row-2-text-3-right {
                        padding-left: 20rpx;
                        color: #999999;
                    }
                }
            }
        }
        .slot-box-row-3 {
            background: #fff;
            display: flex;
            justify-content: flex-end;
            padding: 10rpx 0;
            box-sizing: border-box;
            // border-bottom: 1rpx solid #fff5f5;
            .slot-box-row-3-left {
                // color: #999999;
            }
            .slot-box-row-3-right {
                // padding-left: 20rpx;
                color: #f2403c;
                font-weight: bold;
            }
        }
    }
    .slot-text {
    	font-size: 30rpx;
        .slot-text-color-1 {
            color: #535353;
            padding: 10rpx 0;
            font-size: 26rpx;
        }
        .slot-text-color-2 {
            color: #999;
        }
    }
    .my-list {
        flex: 1;
        overflow: scroll;
    }
    :deep(.uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
        }
    }
    :deep(.uni-list-item__container) {
        padding: 10rpx 10rpx !important;
        padding-left: 10rpx !important;
    }
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    :deep(.uni-list--border:after) {
        background-color: rgba(0,0,0,0) !important;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            height: 500rpx;
            overflow: auto;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
</style>
